<html>

<head>
    <title>HTML 文档结构</title>
    <link rel="stylesheet" href="index.css" />
</head>

<body style="color: darkorchid">
    <div class="main">
        <div class="row">
            <input class="input" type="text" id="inputtext" onkeyup="keyup(event)"placeholder="请输入todo内容" />
            <input type="button" name="bt" value="BUTTON1" onclick="handleClick(event)" />
            <input type="button" name="bt" id="button2" value="BUTTON2" />
        </div>
        <div id="todogroup">
            
        </div>
        <div id="xx" onmouseenter="enter('xx')" onmouseleave="leave('xx')">
            
        </div>

    </div>
</body>
<script lang="javascript">

    var intCnt = 0;

    function init() {
        
        document.getElementById("button2").onclick = handleClick;
        
    }

    function keyup(e) {
        console.log(e);

        if (e.keyCode == 13) {
            handleClick();
        }

    }

    function handleClick(e) {
        console.log('handleClick');
        console.log(e);

        var temp = getValue();

        
        document.getElementById("todogroup").innerHTML += "<div class='item' id='todo"
            + intCnt + "'><input type='checkbox' name='todocheck'><div class='item-value'>"
            + temp + "</div><button class='item-del' type='button' onclick='deletByIndex("
            + intCnt + ")'>删除</button></div>";
        document.getElementById("inputtext").value = "";
        intCnt++;
        
    }

    function getValue() {
        var temp = document.getElementById("inputtext");
        console.log(temp.value);

        return temp.value;
    }

    function deletByIndex(index) {
        document.getElementById("todo" + index).remove();
    }

    function enter(id) {
        document.getElementById(id).style = 'background-color:#3e3e3e'
    }

    function leave(id) {
        document.getElementById(id).style = 'background-color:#FFFFFF'
    }

    init();
</script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .main {
        /* background-color:aliceblue; */
        padding: 8px;
        border: 1px solid blue;
        /* height: 200px; */
        border-radius: 8px;
    }

    .row {
        display: flex;
    }

    .item {
        display: flex;
        align-items: center;
        margin: 6px;
        padding: 3px;

        border-radius: 3px;
        background-color: #fff;
    }

    .item:hover {
        background-color: aqua;

        transform: scale(1.2);
    }

    .item-value {
        flex-grow: 1;
        color: #000;
    }

    .item-del {
        color: aliceblue;
        background-color: red;
        border: 0px;
        opacity: 0;
        border-radius: 4px;
    }

    .item:hover .item-del {
        opacity: 1;
    }

    .input {
        border: 2px solid rgb(247, 248, 249);
        padding: 6px;
        outline: none;
    }

    .input:focus {
        box-shadow: 0px 0px 9px #4086cd;
        border: 2px solid #4086cd;
    }
</style>

</html>